<template>
  <div class="home allposition_qw_content" ref="qwcontent">
    <div class="aside">
      <el-row class="tac">
        <el-col :span="12" style="width: 100%">
          <h5>陨石后台管理系统</h5>
          <el-menu
            :default-active="active"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="1">
              <!-- <i class="el-icon-menu"></i> -->
              <span slot="title" @click="categories">分类管理</span>
            </el-menu-item>
            <el-menu-item index="2" @click="dierye">
              <!-- <i class="el-icon-menu"></i> -->
              <span slot="title">后台账号管理</span>
            </el-menu-item>
            <el-menu-item index="3" @click="user">
              <!-- <i class="el-icon-menu"></i> -->
              <span slot="title">前台账号管理</span>
            </el-menu-item>
            <el-menu-item index="4">
              <!-- <i class="el-icon-document"></i> -->
              <span slot="title" @click="comment">用户评论</span>
            </el-menu-item>
            <el-menu-item index="5">
              <!-- <i class="el-icon-setting"></i> -->
              <span slot="title" @click="addgoods">商品管理</span>
            </el-menu-item>
            <el-menu-item index="6" @click="cart">
              <!-- <i class="el-icon-setting"></i> -->
              <span slot="title">购物车管理</span>
            </el-menu-item>
            <el-menu-item index="7">
              <!-- <i class="el-icon-setting"></i> -->
              <span slot="title" @click="upload">banner管理</span>
            </el-menu-item>
            <el-menu-item index="8" @click="order">
              <!-- <i class="el-icon-menu"></i> -->
              <span slot="title">订单管理</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <div class="cont">
      <nav>
        <div>
          <p>欢迎您：</p>
          {{ admin_name }}
        </div>
        <button @click="exit">退出</button>
      </nav>
      <!-- 路由 -->
      <router-view class="view"></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      token: "",
      admin_name: "",
      fullHeight: "",
      active: "1",
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    show(index) {
      console.log(index._uid);
    },
    exit() {
      this.$router.push({
        path: `/`,
      });
    },
    user() {
      this.$router.push({
        path: `/home/user`,
      });
    },
    dierye() {
      this.$router.push({
        path: `/home/dierye`,
      });
    },
    upload() {
      this.$router.push({
        path: `/home/upload`,
      });
    },
    comment(){
      this.$router.push({
        path:`/home/comment`,
      })
    },
    changeFixed(fullHeight) {
      //动态修改样式
      this.$refs.qwcontent.style.height = fullHeight + "px";
    },
    cart(){
      this.$router.push("/home/cart")
    },
    addgoods() {
      this.$router.push({
        path: `/home/addgoods`,
      });
    },
    categories() {
      this.$router.push({
        path: `/home`,
      });
    },
  },
  mounted() {
    this.admin_name = this.$store.state.admin_name;
    this.fullHeight = `${document.documentElement.clientHeight}`; //默认值
    let str = document.cookie.split("admin_name=")[1];
    this.admin_name = str.split(";")[0];
    this.$store.commit("loginToken", this.token);

    this.token = document.cookie.split("admin_token")[1];

    const that = this;

    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeigh;

        that.fullHeight = window.fullHeight;
      })();
    };
    let address = location.href.split("home/")[1];
    if (address == "") {
      this.active = "1";
    } else if (address == "dierye") {
      this.active = "2";
    } else if (address == "addgoods") {
      this.active = "4";
    }
  },
  watch: {
    fullHeight: function (val) {
      if (!this.timer) {
        this.fullHeight = val;
        this.changeFixed(this.fullHeight);
        this.timer = true;
        let that = this;
        setTimeout(function () {
          that.timer = false;
        }, 100);
      }
    },
  },
};
</script>

<style scoped>
html {
  height: 100%;
}

body {
  height: 100%;
}

.el-col-12 {
  width: 100%;
}

.home {
  display: flex;
}

.aside {
  width: 200px;
  height: 100%;
  background-color: rgb(84, 92, 100);
  position: fixed;
  top: 0;
  left: 0;
}

.tac {
  margin: 0 auto;
}

.tac h5 {
  text-align: center;
  font-size: 20px;
  margin: 20px 0;
  color: white;
}

.tac li {
  width: 200px;
}

span {
  margin-left: 40px;
  font-size: 20px;
}

.cont {
  flex-grow: 1;
  margin-left: 200px;
  border-bottom: 1px solid #d8dce5;
}

.cont nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background-color: #545c64;
}

.cont nav p {
  margin-left: 60px;
  display: inline-block;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}

.cont nav button {
  font-size: 15px;
  background-color: red;
  padding: 10px 20px;
  margin: 0 60px 0 0;
  font-weight: bold;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 8px;
  color: white;
  letter-spacing: 3px;
}

.view {
  box-sizing: border-box;
  height: calc(100% - 60px);
  padding: 0 20px;
}
</style>
